<template>
  <div class="info-main-content">
      <div class="main-body">
           <side-menu active="5"></side-menu>
           <div class="info-main">
              <div class="info-main-title">
                <h3>首页 / 物流信息服务 / 网点信息 / <span>北京荣之联科技股份有限公司</span></h3>
              </div>
              <div class="info-line"></div>
              <div class="info-detail">
                    <div class="detail-title">
                        <div class="detail-companyName">北京荣之联科技股份有限公司</div>
                        <div class="detail-level">
                            <span>用户星级</span>
                            <img src="./../../.././static/img/info/allStar.png" alt="" />
                            <img src="./../../.././static/img/info/allStar.png" alt="" />
                            <img src="./../../.././static/img/info/allStar.png" alt="" />
                            <img src="./../../.././static/img/info/noStar.png" alt="" />
                            <img src="./../../.././static/img/info/noStar.png" alt="" />
                            <div class="detail-status">已认证</div>
                        </div>
                    </div>
                    <!-- 具体信息 -->
                    <div class="detail-information">
                       <h2>云南省昆明市——北京市市辖区</h2>
                       <p class="time-nums">
                         <span class="beginTime">
                         发布时间：2019-04-21  5：30：21</span>      浏览量：12次
                         <span></span>
                       </p>
                        <a-list itemLayout="vertical" size="large" :pagination="pagination" :dataSource="listData">
                           <a-list-item slot="renderItem" slot-scope="item, index">
                            <div class="Infor-title"> {{item.title}}</div>
                            <div class="Infor-cont"> {{item.address}}</div>
                         </a-list-item>
                        </a-list>
                        <div class="once-btn">
                           <button>立即发货</button>
                        </div>
                        <p class="tips">温馨提示：联系我时，请说明是从云南国际物流云上看到的信息，谢谢！</p>
                    </div>
                    <!-- 车源评价 -->
                    <div class="vech-level">
                        <div class="vech-title">
                            <div class="vech-title-name">
                              车源评价
                            </div>
                            <div class="vech-title-into">
                               <a href="javascript:;">查看全部评价</a>
                            </div>
                        </div>
                        <!-- 评价内容 -->
                        <p>以下是此车源的短评词条，联系该车源后点击添加您的印象。</p>
                        <div class="v-tag">
                            <a-tag>我要发货</a-tag>
                            <a-tag>价格高</a-tag>
                            <a-tag>电话不通</a-tag>
                            <a-tag>车不本地，车已走</a-tag>
                            <a-tag>车辆与描述不符</a-tag>
                            <textarea>请写下您的宝贵意见，您的真实、有效评价可以帮助其他人哦</textarea>
                        </div>
                        <div class="once-btn">
                             <button>提交评价</button>
                        </div>
                    </div>
                    <!-- 车主简介 -->
                    <div class="carmaster-detail">
                       <div class="vech-title">
                            <div class="vech-title-name">
                              车主简介
                            </div>
                            <div class="vech-title-into car-title-into">
                               <a href="javascript:;">进入企业主页</a>
                            </div>
                        </div>
                        <!-- 车主细节 -->
                        <div class="carmaster-content">
                             <div class="carmster-photo">
                                  <div class="carmst-bigPic">
                                     <img src="./../../.././static/img/info/carMast.png" alt="" />
                                  </div>
                                  <div class="carmst-list-pic">
                                    <ul>
                                      <li>
                                        <img src="./../../.././static/img/info/goodsPic.png" alt="" />
                                      </li>
                                      <li>
                                        <img src="./../../.././static/img/info/longcar.png" alt="" />
                                      </li>
                                       <li>
                                        <img src="./../../.././static/img/info/goodsPic.png" alt="" />
                                      </li>
                                    </ul>
                                  </div>
                             </div>
                             <div class="carmaster-talk">
                               <p><b>昆明代理有限公司</b>是一家综合性的物流公司，一直以来致力于国际、国内大宗货物的运输业务，提供快递,空运，海运，进口以及物流</p>
                               <p>配套方面的服务.我司与世界著名国际快递公司:DHL、UPS、FEDEX、TNT建立长期的合作关系；同时与国内著名的航空公司:UPS、</p>
                               <p>CZ、CA、AK、SQ、EK等航空公司有着长期的合作关系，充分利用这些全球著名的国际速递与空运公司的服务网络和服务优势，为</p>
                              <p>客户提供快捷、安全的全方位服务。公司有一批经过专门训练，有着丰富物流经验的高素质从业人员。</p>
                             </div>
                        </div>
                    </div>
                    <!-- 智能推荐车源 -->
                    <div class="v-recommend">
                       <div class="vech-title">
                            <div class="vech-title-name">
                              智能推荐车源
                            </div>
                        </div>
                        <!-- 车源列表 -->
                        <div class="v-carList">
                             <a-table :columns="columns" :dataSource="data" :pagination='false'>
                                  <a slot="action" slot-scope="text" href="javascript:;">查看详情</a>
                             </a-table>
                        </div>
                        <div class="vech-work-pic">
                            <img src="./../../.././static/img/info/infoBg.png" alt="" />
                        </div>
                    </div>
              </div>
           </div>
        </div>
  </div>
</template>

<script>
import SideMenu from './../components/SideMenu.vue'

export default {
    components: {
        SideMenu,
    },
    data () {
      return {
        listData:[
          {
            title:"出发地",
            address:"云南昆明市"
          },
          {
            title:"到达地",
            address:"北京市辖区"
          },
           {
            title:"途经地名",
            address:"云南省昆明市"
          },
           {
            title:"车牌号",
            address:"京A9****34"
          },
          {
            title:"车源类型",
            address:"本地车"
          },
           {
            title:"车辆类型",
            address:"厢式货车"
          },
           {
            title:"车长",
            address:"8米"
          },
          {
            title:"载重",
            address:"20吨"
          },
           {
            title:"运价",
            address:"面议"
          },
           {
            title:"随车联系人",
            address:"张三"
          },
          {
            title:"联系电话",
            address:"19833832883"
          },
           {
            title:"发布时间",
            address:"2019-04-21"
          },
           {
            title:"有效期",
            address:"5天"
          },
          {
            title:"说明",
            address:"装车就走"
          }
        ],
        data:[
          {
            key: '1',
            name: '昆明呈贡区—北京大兴厢式货车',
            carnums: '滇B***45',
            carType: '本地车',
            carLeng: '8米',
            carKio:'20吨',
            carTime:'2019-04-21'
          }, {
            key: '2',
            name: '昆明呈贡区—北京大兴厢式货车',
            carnums: '滇B***45',
            carType: '本地车',
            carLeng: '8米',
            carKio:'20吨',
            carTime:'2019-04-21',
          }, {
            key: '3',
            name: '昆明呈贡区—北京大兴厢式货车',
            carnums: '滇B***45',
            carType: '本地车',
            carLeng: '8米',
            carKio:'20吨',
            carTime:'2019-04-21',
          }, {
            key: '4',
            name: '昆明呈贡区—北京大兴厢式货车',
            carnums: '滇B***45',
            carType: '本地车',
            carLeng: '8米',
            carKio:'20吨',
            carTime:'2019-04-21',
          }, {
            key: '5',
            name: '昆明呈贡区—北京大兴厢式货车',
            carnums: '滇B***45',
            carType: '本地车',
            carLeng: '8米',
            carKio:'20吨',
            carTime:'2019-04-21',
          }
        ],
        columns:[
           {
            title: '车辆信息',
            dataIndex: 'name',
          }, 
          {
            title: '车牌号',
            dataIndex: 'carnums',
          }, 
          {
            title: '车源类型',
            dataIndex: 'carType',
          },
          {
            title: '车厂',
            dataIndex: 'carLeng',
          },
          {
            title: '载重',
            dataIndex: 'carKio',
          },
          {
            title: '发布时间',
            dataIndex: 'carTime',
          },
          {
           title: '查看',
          key: 'operation',
          scopedSlots: { customRender: 'action' },
          }
        ]
      }
    },
  }

</script>
<style lang="scss">
@import "./../../../assets/css/info/info.scss";
</style>